<template>
  <div id="app">
    <a-layout style="height: 100%">
      <a-layout-header id="header" style="align-items: center">
        <a-space>
          <img class="logo" src="../assets/logo.svg" />
          <div id="title">佐OJ</div>
        </a-space>
      </a-layout-header>
      <a-layout-content>
        <div class="outer">
          <div class="inner">
            <router-view />
          </div>
        </div>
      </a-layout-content>
      <a-layout-footer class="footer">Footer</a-layout-footer>
    </a-layout>
  </div>
</template>

<style scoped>
#app {
  text-align: center;
}
#header {
  margin: 40px 0;
}
.outer {
  display: flex;
}

.inner {
  margin: 0 auto;
}

.logo {
  height: 48px;
}

#title {
  color: midnightblue;
  font-size: 48px;
}

#app {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../assets/background.jpg");
  background-size: cover;
}

.footer {
  background-color: #42b983;
  position: static;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
</style>
<script></script>
